<template>
    <view class="warehouse-in-detail-list">
       <view class="detail-list-section font-26">
            <view class="item display-flex justify-between">
                <view>
                    <text class="label">单号</text>
                    <text>{{ warehouseInDetailListData.info.pzbh }}</text>
                </view>
                 <view class="display-flex justify-flex align-center">
                    <image src="@/static/icons/audit_icon.png" fit="contain" class="audit-icon" v-if="warehouseInDetailListData.info.shzt == '已审核'"/>
                    <image src="@/static/icons/reject.png" fit="contain" class="reject-icon" v-else/>
                    <text :class="warehouseInDetailListData.info.shzt == '已审核'?'font-2CB526 ml-7':'font-CE0C0C ml-7'">{{ warehouseInDetailListData.info.shzt }}</text>
                </view>
            </view>
            <view class="item">
                <text class="label">仓库</text>
                <text>{{ warehouseInDetailListData.list && warehouseInDetailListData.list.length > 0 && warehouseInDetailListData.list[0].spckmc}}</text>
            </view>
            <view class="item">
                <text class="label">进仓日期</text>
                <text>{{ warehouseInDetailListData.list && warehouseInDetailListData.list.length > 0 &&  warehouseInDetailListData.list[0].ssrqid}}</text>
            </view>
            <view class="item">
                <text class="label">车牌号</text>
                <text>{{warehouseInDetailListData.info.dzzy6}}</text>
            </view>
            <view class="item"> 
                <text class="label">司机姓名</text>
                <text>{{warehouseInDetailListData.info.dzzy7}}</text>
            </view>
            <view class="item">
                <text class="label">联系电话</text>
                <text>{{warehouseInDetailListData.info.dzzy8}}</text>
            </view>
            <view class="item">
                <text class="label">身份证号</text>
                <text>{{warehouseInDetailListData.info.dzzy10}}</text>
            </view>
            <view class="item">
                <text class="label">备注</text>
                <text>{{warehouseInDetailListData.info.dzbz}}</text>
            </view>
            <view class="item">
                <text class="label">创建人</text>
                <text>{{warehouseInDetailListData.info.rsopmcp}}</text>
            </view>
            <view class="item">
                <text class="label">创建时间</text>
                <text>{{warehouseInDetailListData.info.prrq}}</text>
            </view>
        </view>
        <!-- <view class="warehouse-in-detail-list-top display-flex justify-between align-center">
            <view class="flex-item">
                <text>共</text>
                <text class="font-CE0C0C">3</text>
                <text>个记录，</text>
                <text class="font-CE0C0C">3000</text>
                <text> 件，</text>
                <text class="font-CE0C0C">30.600</text>
                <text>吨</text>
            </view>
        </view> -->
       <view class="warehouse-in-detail-list-list">
            <view class="section font-26" v-for="(item, index) in warehouseInDetailListData.list" :key="index" @click="handleRead(index)">
                <view class="title display-flex justify-between align-center">
                    <text>{{ item.spzs }}</text>
                    <view class="display-flex align-center">
                        <image src="@/static/icons/read.png"  fit="contain" class="read-icon"/>
                        <text class="font-255FB6 ml-7">查看</text>
                    </view>
                </view>
                <view class="content" >
                    <view class="item display-flex justify-between">
                        <view class="flex-item">
                            <text class="font-999999">纱支：</text>
                            <text>{{ item.wpggA }}</text>
                        </view>
                        <view class="flex-item">
                            <text class="font-999999">品牌：</text>
                            <text>{{ item.spcd }}</text>
                        </view>
                    </view>
                    <view class="item display-flex justify-between">
                        <view class="flex-item">
                            <text class="font-999999">单重：</text>
                            <text>{{ item.spjsl }}KG</text>
                        </view>
                        <view class="flex-item">
                            <text class="font-999999">件数：</text>
                            <text>{{ item.spjs }}</text>
                        </view>
                    </view>
                    <view class="item display-flex justify-between">
                        <view class="flex-item">
                            <text class="font-999999">重量：</text>
                            <text>{{ item.spsl }}吨</text>
                        </view>
                        <view class="flex-item">
                            <text class="font-999999">批号：</text>
                            <text>{{ item.spbh }}</text>
                        </view>
                    </view>
                    <view class="item display-flex justify-between">
                        <view class="flex-item">
                            <text class="font-999999">柜号：</text>
                            <text>{{ item.spgh }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
<!--        <view class="warehouse-in-detail-list-btn">
            <button class="app-primary-button btn" @click="handlePreview">预览单据</button>
        </view> -->
    </view>
</template>
<script setup lang="ts">
    import { reactive } from 'vue'
	import { onLoad } from '@dcloudio/uni-app';
    import { stock } from '@/api'
	import { util } from '@/utils'
    import type { WarehouseInDetailListData } from '@/@type/warehouseIn'
	
    const warehouseInDetailListData: WarehouseInDetailListData = reactive({
        query:{
            dzid:"",
            shztn:"0"
        },
        list:[],
        info:{
            pzbh: "",
            shzt: "",
            dzzy6: "",
            dzzy7: "",
            dzzy8: "",
            dzzy10: "",
            dzbz: "",
            rsopmc: "",
            prrq: "",
            rsopmcp:""
        }
    })

    onLoad((options:any) => {
        warehouseInDetailListData.query.dzid = options.dzid
        getDetailList()
    })

    const getDetailList = () => {
        stock.getWarehouseInDetailList(warehouseInDetailListData.query).then((res: any) => {
            const data = res.data
            warehouseInDetailListData.info = data.info
            warehouseInDetailListData.list = data.list
        })
    }

    const handleRead = (index: number) => {
        const data =  warehouseInDetailListData.list[index]
        uni.navigateTo({url:'/pages/storage/warehouseIn/detail' + util.paramsStr(data)})
    }

</script>
<style lang="scss" scoped>
    .warehouse-in-detail-list {
        background-color: #F3F4F7;
        .detail-list-section {
            margin:36rpx;
            border-radius:10rpx;
            background:#fff;
            border-radius:10rpx;
            padding:36rpx;
            .item {
                margin-bottom:22rpx;
                .label {
                    color:#999;
                    width:160rpx;
                    display:inline-block;
                }
                .audit-icon,.reject-icon {
                    width: 26rpx;
                    height: 26rpx;
                }
            }
        }
        &-top {
            padding:36rpx;
            font-size:26rpx;
            .btn {
                height:60rpx;
                border-radius: 8rpx;
            }
        }
        &-list {
            .section {
                border-radius: 10rpx;
                background-color:#fff;
                padding:26rpx;
                margin:0 36rpx 20rpx;
                .title {
                    padding-left:18rpx;
                    margin-bottom: 26rpx;
                    .read-icon {
                        width: 31rpx;
                        height: 26rpx;
                    }
                }
                .content {
                    border-top:1rpx solid #EEEEEE;
                    padding:26rpx 0;
                    .item {
                        padding-bottom:10rpx;
                    }
                }
            }
        } 
        &-btn {
            padding:122rpx 26rpx 80rpx;
            .btn {
                border-radius: 10rpx;
            }
        }
    }
</style>